<template>
	<div class="page"   v-loading.fullscreen="loading"
			 element-loading-text="正在启动云组态编辑器,请稍等..." element-loading-spinner="el-icon-loading">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goList" class="goback">组态管理</span>　|　<span>组态：{{viewName}}</span></div>
			<el-button type="primary" size="small" id="goback" @click="goList">返回</el-button>
			
		</div> -->
		<el-button v-if="isFullscreen" type="primary" size="small" class="mapbtn"  @click="fullScreen">退出全屏</el-button>
		<!-- <iframe :src="url" id="mainIframe" name="mainIframe" class="fram" ref="content" allowtransparency="yes" scrolling="no"></iframe> -->
		<iframe :src="url" id="mainIframe" name="mainIframe" class="fram" ref="content" allowtransparency="yes"></iframe>
	</div>
</template>

<script>
	export default {
			name: 'editStage',
			data() {
				return {
					viewName:localStorage.getItem("editViewName"),
					optionId:localStorage.getItem("optionId"),
					isFullscreen:false,
					viewType:1,
					drawName:'',
					viewId:0,
					stageId:0,
					loading:true,
					url:""
				}
	        },
			created() {
				this.viewId = localStorage.getItem("editViewId");
				this.viewType = localStorage.getItem("viewType") || 1;
				if(this.viewType==1){
				   this.optionId=Number(localStorage.getItem("optionId"));
				}else{
				   this.optionId=0;
				}
				// this.drawName=this.$route.query.drawName;
				// this.stageId=this.$route.query.stageId;
				// console.log(this.stageId,this.optionId);
				if(!localStorage.getItem('attoken') || (!localStorage.getItem('atuser'))){
					this.$router.push({
						path: '/',
						name: 'Login',
						component: 'Login'
					});
					localStorage.clear();
				}
				
			},
			mounted() {
				this.showFirst();
				var that=this;
				setTimeout(function(){
					that.loading=false;
				},5000)
				
			},
			methods: {
				goList(){
					this.$router.push({
						name: 'viewList',
						path: 'viewList',
						component: 'viewList'
					});
				},
				// goBack() {
				// 	this.$router.push({
				// 		name: 'configuration',
				// 		path: 'configuration',
				// 		component: 'configuration'
				// 	});
				// },
				
				//获取数据函数
				showFirst: function() {
					var that = this;
					this.$http({
							method: 'post',
							url: 'api/draw/all',
							data: {
								'view_id':this.viewId
								
								//'keyword': keyword
							}
						}).then(res => {
							if (res && res.data.result == "success") {
								this.stageId=res.data.data[0].id;
								if(this.viewType==1){
								    this.url='static/optionZT/index_edit.html?stageId='+this.stageId+'&selectOneWhere='+this.optionId;
								}else{
									this.url='static/platformZT/index_edit.html?stageId='+this.stageId+'&selectOneWhere=0';
								}
								//console.log(oldHeight);
								setTimeout(function(){
								    var oldHeight=that.$refs.content.offsetHeight;
									if(window.innerHeight==window.screen.availHeight-71){
										//console.log(that.$refs.content);
										//document.getElementById("mainIframe").style.height=(1200+30)+'px';
										that.$refs.content.style.cssText += ";height:"+(oldHeight+30)+"px!important";
									}
								},1000)
							}
						}).catch(error => {
							console.log(error);
							this.drawList = [];
							
						});
				},
				
				refreshView(){
					if(this.viewType==1){
					    document.getElementById("mainIframe").src='static/optionZT/index_edit.html?stageId='+this.stageId+'&selectOneWhere='+this.optionId;
					}else{
						document.getElementById("mainIframe").src='static/platformZT/index_edit.html?stageId='+this.stageId+'&selectOneWhere=0';
					}
				},
				
				fullScreen() {
					var that=this;
					this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
					var content = document.documentElement;
					if (!this.isFullscreen) { //进入全屏,多重短路表达式
						(content.requestFullscreen && content.requestFullscreen()) ||
						(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
						(content.webkitRequestFullscreen && content.webkitRequestFullscreen()) || (content.msRequestFullscreen && content.msRequestFullscreen());
					     this.isFullscreen=true;
						 that.$message({
						 	type: 'info',
							dangerouslyUseHTMLString: true,
							duration:6000,
							offset:400,
						 	message: "<div style='color:#111;'>如需还原请点击<span style='color:red;'>全屏切换</span>按钮,如需进入浏览器全屏请按键盘<span style='color:red;'>ESC</span>键！</div>"
						 });
					} else { //CancelFullScreen?document.mozCancelFullScreen():
						document.exitFullscreen ? document.exitFullscreen() :
						document.mozCancelFullScreen ? document.mozCancelFullScreen() :
						document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
					    this.isFullscreen=false;
					}
					if(this.isFullscreen){
						that.$parent.showMenu=false;
						that.$refs.content.removeAttribute("class","fram");
						that.$refs.content.style.position="fixed";
						that.$refs.content.style.top=0;
						that.$refs.content.style.left=0;
						that.$refs.content.setAttribute("frameborder","no");
						that.$refs.content.setAttribute("border","0");
						that.$refs.content.style.width=window.screen.width+'px';
						that.$refs.content.style.height=window.screen.height+'px';
					}else{
						that.$parent.showMenu=true;
						that.$refs.content.style.position="relative";
						that.$refs.content.style.top=0;
						that.$refs.content.style.left=0;
						that.$refs.content.style.width="99.4%";
						//that.$refs.mapbtn.style.bottom="1.5rem";
						that.$refs.content.setAttribute("frameborder","1");//1表示为三维边框，0不是三维，no表示不显示边框，yes显示默认边框
						that.$refs.content.setAttribute("border","1");
						that.$refs.content.setAttribute("class","fram");
						if(window.screen.width>=2560){
							that.$refs.content.style.height=1170+"px";
						}else if(window.screen.width>=1920){
							that.$refs.content.style.height=800+"px";
						}else if(window.screen.width<=1600){
							that.$refs.content.style.height=15.7+"rem";
						}
						
					}
				}
			},
			beforeDestroy() {
				this.$message.closeAll();
			},
			destroyed() {
				sessionStorage.removeItem("copyContent");
			}
		}
</script>

<style scoped>
	/* @media all and (min-width:2560px) {
		.fram{
			height:1170px!important;
		}
	}
	
	@media all and (max-width:1920px) {
		.fram{
			height:800px!important;
		}
	}
	
	@media all and (max-width:1600px) {
		.fram{
			height:15.7rem!important;
		}
	} */
	
	.page{
		width:100%;
		height:100%;
	}
	
	.fram{
		float:left;
		margin-top:0.2rem;
		width:99.4%;
		/* height:800px; */
		height:calc(100% - 0.4rem);
		
		/* min-height:810px; */
		/* max-height:840px; */
	    /* border:1px solid red; */
	}
	
	.mapbtn {
		display: inline-block;
		position:fixed;
		height:0.35rem;
		padding:0 4px;
		width:1.4rem;
		/* top:0.34rem;
		right:300px; */
		top:-1px;
		right:0;
		font-size:0.3rem;
		z-index: 10000;
		/* background-color:rgba(0,0,0,0.3)!important; */
		background-color:transparent;
		border:none;
	}
	
	.mapbtn:hover{
		background-color:rgba(0,0,0,0.8)!important;
	}
	
</style>
